<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>在线测验系统</title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<link rel="stylesheet" th:href="@{/plug/element-ui/theme-chalk/index.css}" />
	<link rel="stylesheet" th:href="@{/plug/vant/lib/index.css}" />
	<link rel="stylesheet" th:href="@{/css/index.css}" />
	<script th:src="@{/plug/vue/vue.js}"></script>
	<script th:src="@{/plug/axios/axios.min.js}"></script>
	<script th:src="@{/plug/axios/request.js}"></script>
	<script th:src="@{/plug/element-ui/index.js}"></script>
	<script th:src="@{/plug/vant/lib/vant.min.js}"></script>
	<script th:src="@{/js/index.js}"></script>
	<style scoped lang="less">
	.el-collapse-item-title {
	    width: 90%;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.answer-group {
		padding: 0 16px;
	}

	.answer-group .van-checkbox {
		margin-bottom: 8px;
	}
	</style>
</head>

<body>
	<div id="mainApp">
		<van-row>
			<van-nav-bar title="解析汇总" left-arrow @click-left="onReback">
				<template #left>
					<van-icon name="arrow-left" />
				</template>
				<template #right>

				</template>
			</van-nav-bar>
		</van-row>
		<van-row>
			<!--<van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
				<template #action>
					<div @click="onSearch">搜索</div>
				</template>
			</van-search>-->
			<van-cell>
			  <el-collapse accordion>
				  <el-collapse-item v-for="(data, index) in datas">
				    <template slot="title">
				      <div class="el-collapse-item-title">
						  <el-tag v-if="data.respResult === 1" type="success" effect="plain">正确</el-tag>
						  <el-tag v-if="data.respResult === 0" type="danger" effect="plain">错误</el-tag>
					  {{ data.topicTitle }}</div>
				    </template>
				    <div v-if="data?.topicType*1 < 2">
						<b>选项：</b><br>
				    	<van-checkbox-group v-model="data.respAnswers" class="answer-group">
						  <van-checkbox :name="option.optionId" v-for="option in data.options">
									{{option.optionText}}
						  </van-checkbox>
						</van-checkbox-group>
						<p><b>参考答案：</b>{{data.topicAnswers}}</p>
				    </div>
				    <div v-if="data?.topicType*1 == 2">
					<p><b>参考答案：</b>{{data.topicAnswer}}</p>
					<p><b>你的回答：</b>{{data.respAnswer}}</p>
					 </div>
				    <div><b>解析：</b>{{data.topicAnalysis}}</div>
				  </el-collapse-item>
				</el-collapse>
		  </van-cell>
		</van-row>
		<van-empty v-if="datas == null || datas.length == 0" description="暂无数据" />
		<!--<van-row>
			<van-cell center :title="record.chapter.chapterTitle" label="100道题，99人已完成" v-for="record in records" :key="record.recordId">
				<template #right-icon>
			    	<div>
			    	<van-tag size="mini" plain type="warning">未提交</van-tag>
			    	<br><span>90%</span>
			    	</div>
			    </template>
			</van-cell>
		</van-row>-->
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	const mainApp = {
		el: '#mainApp',
		data: {
			activeMenu: 'my',
			activeNames: ['1'],
			optionSelect: ['0669d6a2df4948ba8001a1805ade9a2e'],
			datas: [],
			query:{
				result: '',
				recordId: '',
				accountId: getLoginId()
			}
		},
		methods: {
			
		}
	}
	let vueData = {
		
	}
	let vueMethods = {
		onSearch(){
			
		},
		onReback() {
			history.back()
		},
		onClickTab(name, title) {
			let that = this
	      	that.getWrongs();
	    },
	    handleChange(val) {
        	console.log(val);
      	},
		getWrongs() {
			let that = this
			postRequst('/user/getWrongs', that.query, true).then(function (resp) {
				that.datas = resp.rows
			})
		},
		/**getTopicAnswer(data){
			let text = ''
        	for(i in data.options){
				for(a in data.topicAnswer){
					if(data.options[i].optionId === data.topicAnswer[a]){
						text = text + data.options[i].optionText +'、'
					}
				}
			}
			return text
		}**/
	}
	function vueCreated() {
		let that = this
		let rId = GetQueryString('rId')
		let t = GetQueryString('t')
		that.query.recordId = rId
		that.query.result = t
		that.getWrongs()
	}
</script>
	<script th:src="@{/js/VueCreate.js}"></script>

</html>